<template>
<div class="promotion">
    <el-row :gutter="20">
        <el-col :md="12" :xs="24">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>邀请码</span>
                    </div>
                </template>
                <div>
                    <el-form-item label="邀请码" label-width="80">
                        <el-input v-model="state.data.invite_code" disabled placeholder="请输入邀请码">
                            <template #append>
                                <el-button type="primary" icon="el-icon-DocumentCopy" @click="copy(state.data.invite_code)"></el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="邀请链接" label-width="80">
                        <el-input v-model="state.data.invite_url" disabled placeholder="请输入邀请链接">
                            <template #append>
                                <el-button type="primary" icon="el-icon-DocumentCopy" @click="copy(state.data.invite_url)"></el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                </div>
            </el-card>
        </el-col>
        <el-col :md="12" :xs="24">
            <el-card class="rewards">
                <template #header>
                    <div class="card-header">
                        <span>邀请奖励</span>
                    </div>
                </template>
                <div>

                </div>
            </el-card>
        </el-col>
        <el-col :md="24" :xs="24">
            <el-card class="box-card" style="margin-top: 20px;">
                <template #header>
                    <div class="card-header">
                        <span>邀请记录</span>
                    </div>
                </template>
                <div>
                    <el-table :data="state.promotion" style="width: 100%">
                        <el-table-column prop="avatar" label="头像">
                            <template #default="{row}">
                                <el-avatar :src="fullUrl(row.avatar)" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="username" label="用户名" />
                        <el-table-column prop="id" label="下级ID" />
                        <el-table-column prop="join_time" label="注册时间">
                            <template #default="{row}">
                                {{ timeFormat(row.join_time) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="last_login_time" label="最后登录">
                            <template #default="{row}">
                                {{ timeFormat(row.last_login_time) }}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import { promotion } from '/@/api/frontend/chat/user'
import {fullUrl, timeFormat} from "/@/utils/common";
import {ElMessage} from "element-plus";

const state: {
    data: any,
    promotion: any,
} = reactive({
    data: {
        invite_code: '',
        invite_url: '',
    },
    promotion: [],
})

// promotion
promotion().then(res => {
    state.data.invite_code = res.data.invite_code
    // 当前域名 + /#/chat?invite_code=邀请码
    state.data.invite_url = window.location.origin + '/#/chat?invite_code=' + res.data.invite_code
    state.promotion = res.data.promotion
})

function copy(text: string) {
    const input = document.createElement('input')
    input.setAttribute('readonly', 'readonly')
    input.setAttribute('value', text)
    document.body.appendChild(input)
    input.select()
    input.setSelectionRange(0, 9999)
    if (document.execCommand('copy')) {
        document.execCommand('copy')
        ElMessage.success('复制成功')
    }
    document.body.removeChild(input)
}
</script>

<style scoped lang="scss">
.promotion {
    width: 100%;
    padding: 2px;

}
// 手机
@media screen and (max-width: 768px) {
    .rewards {
        margin-top: 20px;
    }
}
</style>
